<template>
    <div style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0;">
        <!-- <div class="border_bottom_shadow"></div> -->
        <!-- <div class="service_menu">
            <div class="service_menu_item" :class="{'active' : active == 'local'}" style="margin: 10px 0 0 10px;" @click="activeEvent('local')">
                <i class="el-icon-s-platform" aria-hidden="true"></i>
                <div>本地服务</div>
            </div>
            <div class="service_menu_item" :class="{'active' : active == 'sever'}" style="margin: -1px 0 0 10px;" @click="activeEvent('sever')">
                <i class="el-icon-upload" aria-hidden="true"></i>
                <div>网络服务</div>
            </div>
        </div> -->
        <!-- <div class="service_switch">
            <div class="service_switch_item" :class="{'active' : active == 'sever'}" @click="activeEvent('sever')">本地服务</div>
            <div class="service_switch_item" :class="{'active' : active == 'local'}" @click="activeEvent('local')">网络服务</div>
        </div> -->
        <!-- <div class="service_content">
            <local v-if="active == 'local'" ref="local"></local>
            <sever v-if="active == 'sever'" ref="sever"></sever>
        </div> -->
        <local v-if="active == 'local'" ref="local" :changeEvent="activeEvent" :onCreat="onCreat" :onEdit="onEdit" :onDelete="onDelete"></local>
        <sever v-if="active == 'sever'" ref="sever" :changeEvent="activeEvent" :onCreat="onCreat" :onEdit="onEdit" :onDelete="onDelete"></sever>
        <div class="PluginList">
            <div class="PluginItem" v-for="(item,index) in plugin" :key="index" :title="item.name">
                <img :src="plugInPath + '\\' + item.path + item.icon" alt="" @click="openPlugIn(item)">
            </div>
        </div>
        <el-drawer :title="projectEdit.title ? '编辑项目' : '新建项目'" :wrapperClosable="false" :direction="'ltr'" destroy-on-close size="800px" :visible.sync="editBox">
            <editProject :projectData="projectEdit" :submitEdit="submitEdit"></editProject>
        </el-drawer>
    </div>
</template>
<script>
import service from '@/action/service/index';
import editProject from '@/components/service/editor';
import local from '@/components/service/local';
import sever from '@/components/service/sever';
import plugin from '../plugin';

const path = require('path');
const plugInPath = path.join(path.resolve('./'), './plugIn');

// console.log(plugin);

export default {
    components: {
        local,
        sever,
        editProject
    },
    data() {
        return {
            plugInPath: plugInPath,
            plugin: plugin,
            editBox: false,
            projectEdit: {
                title: '',
                description: '',
                editProject: '',
            },
            active: 'sever',
        }
    },
    mounted() {
        const customTitlebar = require('custom-electron-titlebar');
        let titlebar = new customTitlebar.Titlebar({
            backgroundColor: customTitlebar.Color.fromHex('#FFF'),
            enableMnemonics: false,
        });
        titlebar.titlebar.style.zIndex = '40';
        titlebar.title.style.flex = '1 1 auto';
        titlebar.title.style.paddingLeft = '10px';
        titlebar.menubarContainer.style.display = 'none'
        titlebar.updateTitle(` `);
        window.action = service.service;
    },
    methods: {
        openPlugIn(item) {
            // open-plugin-window
            this.$electron.ipcRenderer.send('open-plugin-window', JSON.stringify(item));
        },
        onDelete(data) {
            if (this.active == 'local') {
                var ans = this.$confirm('是否删除项目 ' + data.title + ' ？');
                if (ans) {
                    window.action.deletelocalProject(data.projectId).then((res) => {
                        if (res) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.$refs.local.getProjects();
                        };
                    });
                };
            } else if (this.active == 'sever') {
                var ans = this.$confirm('是否删除项目 ' + data.title + ' ？');
                if (ans) {
                    window.action.deleteSeverProject(data.projectId, (res) => {
                        if (res) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.$refs.sever.getProjects();
                        };
                    });
                };
            };
        },
        submitEdit(data) {
            var _data = JSON.parse(JSON.stringify(data));
            if (this.active == 'local') {
                if (_data.projectId) {
                    window.action.updateLoaclProject(_data.projectId, _data).then((res) => {
                        if (res) {
                            this.projectEdit = {
                                title: '',
                                description: '',
                            };
                            this.editBox = false;
                        };
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs.local.getProjects();
                    });
                } else {
                    window.action.creatLoaclProject(_data).then((res) => {
                        if (res) {
                            this.projectEdit = {
                                title: '',
                                description: '',
                            };
                            this.editBox = false;
                        };
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs.local.getProjects();
                    });
                };
            } else if (this.active == 'sever') {
                if (_data.projectId) {
                    window.action.updateSeverProject(_data.projectId, _data, (res) => {
                        if (res) {
                            this.projectEdit = {
                                title: '',
                                description: '',
                            };
                            this.editBox = false;
                        };
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs.sever.getProjects();
                    });
                } else {
                    window.action.creatSeverProject(_data, (res) => {
                        if (res) {
                            this.projectEdit = {
                                title: '',
                                description: '',
                            };
                            this.editBox = false;
                        };
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs.sever.getProjects();
                    });
                };
            };
        },
        onEdit(data) {
            var _data = JSON.parse(JSON.stringify(data));
            this.projectEdit = {
                projectId: _data.projectId,
                title: _data.title,
                description: _data.description,
            };
            this.editBox = true;
        },
        onCreat() {
            this.projectEdit = {
                title: '',
                description: '',
            };
            this.editBox = true;
        },
        activeEvent(type) {
            if (this.active == type) {
                this.active = null;
            } else {
                this.active = type;
            };
            // setTimeout(() => {
            //     if (this.active == 'local') {
            //         this.$refs.local.getProjects();
            //     } else {
            //         // this.$refs.sever.getSeverLink();
            //     }
            // }, 10);
        },
    },
}
</script>